# -*- coding: utf-8 -*-
# ----------------------------------------------------------------------------
# pyojo                                           Copyright (c) 2011 nabla.net
# ----------------------------------------------------------------------------
""" Demo: pyojo.js.dijit.form.TextBox
"""
from pyojo.all import *
from pyojo.js.lib.demo import new_panel


validate = js.Function("event","""

if(this.validate()){
            return confirm('Form is valid, press OK to submit');
        }else{
            alert('Form contains invalid data.  Please correct first');
            return false;
        }
        return false;
""")




def GET(request):

    theform = form.Form(var =True, name='theform',ID=True,
                        onSubmit = validate)
    input_box = form.ValidationTextBox(
                                       ID = True,
                              name = "testbox",
                              value = '',
                              required = True,
                              placeHolder = "something")
    
    input_number = form.NumberTextBox(name="testnumber", ID=True)
    input_numspin = form.NumberSpinner(name="testnumspin", ID=True)
    input_currency = form.CurrencyTextBox(name="testcurrency", ID=True)
    input_date = form.DateTextBox(name="testdate", ID=True)
    input_time = form.TimeTextBox(name="testtime", ID=True)
    input_stext = form.SimpleTextarea(name="teststext", ID=True)
    input_text = form.Textarea(name="testtext", ID=True)
    input_chk = form.CheckBox(name="test_chk", ID=True, value="Check")
    input_rb = form.RadioButton(name="test_rb", ID=True, value="Check")
    
    input_hs = form.HorizontalSlider(name="test_hs", ID=True)
    input_vs = form.VerticalSlider(name="test_vs", ID=True)
    
    input_sel = form.Select(name="test_select", ID=True,
                            options = [{"label":"English", "value":"EN"},
                                       {"label":"Spanish", "value":"ES"}
                                      ])
    
    #Use a store                            
    input_msel = form.MultiSelect(name="test_mselect", ID=True,
                            options = [{"label":"English", "value":"EN"},
                                       {"label":"Spanish", "value":"ES"}
                                       ])
    #Use a store
    input_combo = form.ComboBox(name="test_cselect", ID=True,
                            options = [{"name":"English", "id":"EN"},
                                       {"name":"Spanish", "id":"ES"}
                                       ])
    
    #dijit/form/DataList
    button = form.Button(type = "submit",
                         label = 'Submit', 
                         ID=True,
                         #onClick = js.Function("alert('Button.onClick')"),
                         iconClass="pyojoIconAccept")
    
    reset = form.Button(type = "reset",
                         label = 'Reset', 
                         ID=True,
                         #onClick = js.Function("alert('Button.onClick')"),
                         iconClass="pyojoIconCancel")
    
    panel = new_panel("Demo Input", "TABS")
    
    col = "<tr><td>%s</td><td><input id=\"%s\"></input></td></tr>"
    html = "<div id=\"%s\"><table>" % theform.ID
    html += col % ("form.TextBox", input_text.ID)
    html += col % ("form.NumberTextBox", input_number.ID)
    html += col % ("form.NumberSpinner", input_numspin.ID)
    html += col % ("form.CurrencyTextBox", input_currency.ID)
    html += col % ("form.DateTextBox", input_date.ID)
    html += col % ("form.TimeTextBox", input_time.ID)
    html += col % ("form.SimpleTextarea", input_stext.ID)
    html += col % ("form.Textarea", input_text.ID)
    html += col % ("form.CheckBox", input_chk.ID)
    html += col % ("form.RadioButton", input_rb.ID)
    html += col % ("form.HorizontalSlider", input_hs.ID)
    html += col % ("form.VerticalSlider", input_vs.ID)
    
    html += col % ("form.Select", input_sel.ID)
    html += col % ("form.MultiSelect", input_msel.ID)
    html += col % ("form.ComboBox", input_combo.ID)
    html += "<tr><td></td><td><button id=\"%s\"></button></td></tr>" % button.ID
    html += "<tr><td></td><td><button id=\"%s\"></button></td></tr>" % reset.ID
    html+="</div></table>"
    panel["content"] = html

    
    
    return js.Require(panel,
                      theform,
                      input_box,
                      input_number,
                      input_numspin,
                      input_currency,
                      input_date,
                      input_time,
                      input_stext,
                      input_text,
                      input_chk,
                      input_rb,
                      input_hs,
                      input_vs,
                      input_sel,
                      input_msel,
                      input_combo, 
                      button, 
                      reset,
                      #dojo.on(theform.ID, "submit", validate),
                      #"on(%s, 'submit', %s);" % (theform.ID, validate),
                      dojo.on(theform.ID, "reset", "console.log(%s.getValues());alert('RESET');" % theform.ID),
                      "status('Form inputs demo ready.');")
